<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./static/css/style.css" rel="stylesheet">
    <style lang="less" scoped>
        html, body, .home, .content {margin: 0;padding: 0;width: 100%;height: 100%;}
        .home {
            background-image: url("./static/img/sg-cont-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
        }
        .home-main {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        /** 首衡高碑店国际农产品交易中心*/
        /** 等待车辆进场中...*/
        .state {
            background-image: url("./static/img/sg-text-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 1150px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            line-height: 150px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 120px;
            color: #21348C;
        }
        /** 状态2的box **/
        .content {
            background-image: url("./static/img/sg-cont-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /** 顶部标题 **/
        .content-title {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 51px;
            color: #FFFFFF;
            background: linear-gradient(0deg, #FFFFFF 0%, #C9E0FF 49.755859375%, #BCCCF8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding-top: 32px;
        }
        /** 3个框 **/
        .cont {
            flex: 1;
            padding: 84px 80px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .cont-top {
            width: 100%;
            height: 527px;
            display: flex;
            justify-content: center;
        }
        .item {
            height: 544px;
            background-image: url("./static/img/sg-itembg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
        .item1 {
            width: 1100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 90px 0;
            box-sizing: border-box;
        }
        .car {
            width: 677px;
            height: 105px;
            background-image: url("./static/img/sg-car.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .car-no {
            width: 677px;
            height: 191px;
            background-image: url("./static/img/sg-car-no.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .car-text {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 116px;
            color: #FDFDFF;
            background: linear-gradient(0deg, #BDC2FF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cont-bottom {
            width: 100%;
            height: 260px;
            margin-top: 15px;
            background-image: url("./static/img/sg-state-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cont-bottom-text {
            text-align: center;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 140px;
            color: #e3f0ff;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>

<body>
<div class="home" id="status1">
    <div class="content-title">首衡高碑店国际农产品交易中心</div>
    <div class="home-main">
        <div class="state">等待车辆进场中...</div>
    </div>
</div>
<div class="content" id="status2" style="display: none;">
    <div class="content-title">首衡高碑店国际农产品交易中心</div>
    <div class="cont">
        <div class="cont-top">
            <div class="item item1">
                <img class="car" src="./static/img/sg-car.png" alt="">
                <div class="car-no">
                    <div class="car-text" id="carNo"></div>
                </div>
            </div>
        </div>
        <div class="cont-bottom">
            <div class="cont-bottom-text" id="message"></div>
        </div>
    </div>
</div>
</body>
<script src="./static/js/jquery-3.3.1.min.js"></script>
<script src="./static/js/VoiceUtil.js"></script>
<script>
    $(document).ready(function() {
        var tipsRemoteAdr = window.location.host;
        tipsRemoteAdr = "localhost:8999"

        console.log(tipsRemoteAdr, "tipsRemoteAdr");
        var statusArr = [1, 2]
        var interval = 500;
        setTimeout(function() {
            reloadVoices();
            let res = { "code": "200", "message": "SUCCESS", "data": {"status": 2,  "carNo": "冀F666666", "subCarType": "重型前四后六8.6-9.6 首衡高碑店国际农产品交易中心", "subProdName": "蔬菜", "weight": "12000", "realAmount": "100.5", "voiceMsg": "开始称重 请保持车辆稳定!", "errorMsg": "车辆未核验 请联系管理员完成车辆核验 首衡高碑店国际农产品交易中心" }, "extInfo": null }
            displayDiv(res.data);
            // setInterval(sendRequest, interval);
        }, 3000);

        function sendRequest(){
            $.ajax({
                type: "GET",
                url: "http://" + tipsRemoteAdr + "/lpr/tips",
                dataType: "json",
                success: function(res) {
                    // console.log(res, "res");
                    if(res.code == '200'){
                        displayDiv(res.data);
                    }
                }
            });
        }
        function displayDiv(data){
            //隐藏
            for (let i = 0; i < statusArr.length; i++) {
                $("#status" + statusArr[i]).hide();
            }
            //参数
            if(data.carNo != null && data.carNo != ''){
                $("#carNo").html(data.carNo);
            }
            // 消息
            if(data.errorMsg != null && data.errorMsg != ''){
                $("#message").html(data.errorMsg);
            }
            $("#status" + data.status).show();
            if(data.status == 1){
                clearVoices();
            }else{
                // 音频
                if(data.voiceMsg != null && data.voiceMsg != ''){
                    if(!voiceHasArr.includes(data.voiceMsg)){
                        voiceToArr.push(data.voiceMsg);
                    }
                    playVoice();
                }
            }
        }
    });
</script>
<script>
    let subCarTypeInterval, messageInterval
    clearInterval(subCarTypeInterval)
    clearInterval(messageInterval)
    function marquee(elementId) {
        let marqueeElement = document.getElementById(elementId);
        let scrollAmount = 1; // 每次滚动的像素数
        let scrollLeftWidth = marqueeElement.scrollLeft
        let viewWidth = marqueeElement.offsetWidth
        let totalWidth = marqueeElement.scrollWidth
        console.log('scrollLeftWidth', scrollLeftWidth)
        console.log('viewWidth', viewWidth)
        console.log('totalWidth', totalWidth)

        if (totalWidth > viewWidth) {

        }
        marqueeElement.scrollLeft += scrollAmount;
        let runWidth = scrollLeftWidth + viewWidth
        // console.log("scrollLeft", marqueeElement.scrollLeft, "offsetWidth", marqueeElement.offsetWidth, "scrollWidth", marqueeElement.scrollWidth)
        // 如果文字滚动到末尾，则从头开始滚动
        if (runWidth >= totalWidth) {
            marqueeElement.scrollLeft = 0;
        }
    }
    // 设置滚动间隔（例如每秒30次）
    messageInterval = setInterval(() => {
        marquee('message')
    }, 30)
</script>
</html>
